<template>
  <div class="orderContent flexs">
    <div class="cginfo w100">
      <div class="cTitle">
        <h3>彩稿信息</h3>
      </div>
      <div class="tagsBox">
        <el-row class="w100">
          <el-col>
            <div class="pic-left">
              <div class="colorPic flex flex_center">
                <div
                  v-if="urlList && urlList.length > 0"
                  class="flex w100 flex_wrap "
                >
                  <div
                    v-for="imgsrc in urlList"
                    :key="imgsrc"
                    class="img_c"
                  >
                    <!-- <div v-show="imgsrc.colorDraftTypeName" class="text">
                                  {{ imgsrc.colorDraftTypeName }}
                                </div> -->
                    <div
                      class="yulan flex-column-center pointer"
                      @click="
                        previewColor(imgsrc.draftFilePreviewUrl)
                      "
                    >
                      <i class="iconfont yulanIco" />
                    </div>
                    <el-image-viewer
                      v-show="isShadeShow"
                      :initial-index="0"
                      :on-close="onCloseviewer"
                      :url-list="urlList"
                    />
                    <img
                      class="img_i"
                      style="max-width: 90%"
                      :src="imgsrc"
                      alt=""
                    >
                  </div>
                </div>

              </div></div></el-col>
        </el-row>
      </div>
      <!-- 印刷颜色 -->
      <el-empty v-if="urlList.length === 0" description="暂无彩稿图" />

      <div class="cTitle">
        <h3>颜色信息</h3>
      </div>

      <div
        v-for="(item, index) in productFrom.productData.tagDataList"
        :key="item.productTagCode"
        class="layerTable"
      >
        <div v-if="index === 0" class="border lastTdNoBorder">
          <el-table
            :data="item.colorDataList"
            border
            fit
            style="width: 100%"
          >
            <el-table-column
              prop="colorName"
              label="印刷色"
            >
              <template scope="{row}">
                {{ row.colorName || "--" }}
              </template>
            </el-table-column>
            <el-table-column
              prop="colorTypeName"
              label="颜色类型"
            >
              <template scope="{row}">
                {{ row.colorTypeName || "--" }}
              </template>
            </el-table-column>
            <el-table-column
              prop="colorReferenceName"
              label="参考"
            >
              <template scope="{row}">
                {{ row.colorReferenceName || "--" }}
              </template>
            </el-table-column>

            <el-table-column
              prop="colorRemark"
              label="备注"
              width="auto"
            >
              <template scope="{row}">
                {{ row.colorRemark || "--" }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  name: '',
  components: { ElImageViewer },
  props: {
    orderNo: { 
      type: String
    }
  },
  data() {
    return {
      dataLoading: false, // 数据加载效果
      colorDraftsLists: [],
      srcList: [], // 预览图集合
      colorImagUrl: '', // 预览得彩稿链接
      isShadeShow: false, // 遮罩层是否打开
      productFrom: {
        productData:{
          tagDataList:[]
        }
      },
      urlList: [] // 图片列表
    }
  },
  created() {
    console.log(this.orderNo)
    // 得到彩稿图片列表
    this.showColorDrafts()

    this.getOrderInfo()
  },
  mounted() {
  },
  methods: {
    // 预览彩稿
    previewColor(url) {
      this.isShadeShow = true
      this.colorImagUrl = url
    },
    // 关闭遮罩div
    colosrSheBox() {
      this.isShadeShow = false
    },
    onCloseviewer() {
      this.isShadeShow = false
    },

    getOrderInfo() {
      const parmas = {
        saleOrderNo: this.orderNo
      }
      this.$api.business
        .GetSaleOrderDetail(parmas)
        .then((res) => {
          this.productFrom = res
        })
        .catch(() => {
        })
    },
    showColorDrafts() {
      const parmas = {
        orderNo: this.orderNo
      }
      this.$api.product
        .QueryOrdersColorDrafts(parmas)
        .then((res) => {
          if (res.fileDataList && res.fileDataList.length) {
            const ur = []
            res.fileDataList.forEach((e) => {
              ur.push(e.draftFilePreviewUrl)
            })
            this.$nextTick(() => {
              this.urlList = ur
              // this.showViewer = true
            })
          } else {
            // this.$message({
            //   type: 'error',
            //   message: '暂无彩稿'
            // })
          }
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>

.orderContent {
  width: 100%;
  flex: 1;
.colorPic {
  height: 100%;
  margin: 0 0 5px 0;
  overflow: hidden;
  .img_c {
    width: 250px;
    height: 250px;
    align-items: center;
    justify-content: center;
    display: flex;
    background-color: #e6e6e6;
    margin: 5px 5px;
    // text-align: center;
    position: relative;
    .text {
      position: absolute;
      top: 0;
      left: 0;
      font-size: 12px;
      font-weight: 400;
      color: #ffffff;
      line-height: 22px;
      background: #000000;
      padding: 2px 5px;
      border-radius: 0px 0px 4px 0px;
      opacity: 0.5;
    }
    .yulan {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      position: absolute;
      bottom: 10px;
      right: 16px;
      z-index: 8;
      color: #fff;
      background: #7f7f7f;
    }
    .img_i {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
    }
  }
}
}

</style>
